<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.red {
			color: red;
		}
		.font {
			font-size: 30px;
		}
	</style>
</head>
<body>
	<div id="app">
		<div>
			<p :class="A">测试的文字</p>
			<p :class="{red: false, font: true}">测试的文字</p>
			<p :class="B">测试的文字</p>
			<p :class="['font', 'red']">测试的文字</p>
			<p :class="C">测试的文字</p>
		</div>
		<div>
			<p :style="{color:'red'}">测试的文字</p>
			<p :style="{color:D}">测试的文字</p>
			<p :style="E">测试的文字</p>
		</div>
	</div>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				A: 'red',
				B: {
					red: false,
					font: true
				},
				C: ['font', 'red'],
				D: 'red',
				E: {
					'color': 'red',
					'font-size': '50PX'
				}
			}
		});
	</script>
</body>
</html>